<!DOCTYPE html>
<html>
<head>
	
	<title>Custom Icons Tutorial - Leaflet</title>

	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	
    <link rel="stylesheet" href="../dist/leaflet.css"/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
	<script src="../dist/leaflet.js"></script>


	<style>
		html, body {
			height: 100%;
			margin: 0;
		}
		#map {
			width: 100%;
			height:100%;
			position: relative;
		}
		.info{
			z-index: 999;
			font-size: 12px;
			font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
			line-height: 1.5;
			font-weight: 300;
			color: #111213;
			box-sizing: border-box;
			right: 1rem;
			width: 26rem;
			margin-left: 0;
            margin-right: 50%;
			border-top-color: grey;
			padding: .75rem 1.25rem;
			margin-bottom: 1rem;
			border-radius: .25rem;
			position:absolute;
			top: 1rem;
			background-color: white;
			min-width: 22rem;
			border-width: 0;
			left: 1rem;
			box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
		}
	</style>

	
</head>
<body>

<div id='map'>
	<div class="info">
		<label>是否支持系统定位功能：</lable><label id="msg"></label>
		<!-- <label>详细参数：</lable> -->
		<p  id="content" style="color:rgb(46, 8, 235)"></p>
		<p  id="error_info" style="color: crimson;"></p>
		<div >
			<label>经纬度位置(经度，纬度，定位精度)：</label><br><a id="sys_lng_lat" style="color: darkblue;"></a>
			<button onclick="copyText()" style="background-color: #0fe352;font-size: medium;">复制经纬度</button>
		</div>
	</div>
</div>
<!-- 底图 -->
<script>
	// 	var map = L.map('map',{
	//   crs: L.CRS.EPSG4326,
	//   zoomControl: true,
	//   editable:true
	// }).setView([28.544177,103.785489], 13);
	   
	// 天地图墨卡托
			//影像底图
			const image = L.tileLayer('http://t{s}.tianditu.gov.cn/img_w/wmts?tk=c1045b42eef9c34e1e568d67dcab19fa&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}', {
				subdomains: [0, 1, 2, 3, 4, 5, 6, 7],
			})
			//影像注记
			const cia = L.tileLayer('http://t{s}.tianditu.gov.cn/cia_w/wmts?tk=c1045b42eef9c34e1e568d67dcab19fa&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}', {
				subdomains: [0, 1, 2, 3, 4, 5, 6, 7],
				transparent: true,
				zIndex: 3,
			})
			//矢量底图
			
			const vec = L.tileLayer('http://t{s}.tianditu.gov.cn/vec_w/wmts?tk=c1045b42eef9c34e1e568d67dcab19fa&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}', {
				subdomains: [0, 1, 2, 3, 4, 5, 6, 7],
			})
			//矢量注记
			const cva = L.tileLayer('http://t{s}.tianditu.gov.cn/cva_w/wmts?tk=c1045b42eef9c34e1e568d67dcab19fa&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}', {
				subdomains: [0, 1, 2, 3, 4, 5, 6, 7],
				transparent: true,
				zIndex: 3,
			})
			//地形晕渲
			const ter = L.tileLayer('http://t{s}.tianditu.gov.cn/ter_w/wmts?tk=c1045b42eef9c34e1e568d67dcab19fa&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}', {
				subdomains: [0, 1, 2, 3, 4, 5, 6, 7],
			})
			//地形注记
			const cta = L.tileLayer('http://t{s}.tianditu.gov.cn/cta_w/wmts?tk=c1045b42eef9c34e1e568d67dcab19fa&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cta&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}', {
				subdomains: [0, 1, 2, 3, 4, 5, 6, 7],
				transparent: true,
				zIndex: 3,
			})
			///中科星图 影像
			////https://tiles1.geovisearth.com/base/v1/img/{z}/{x}/{y}?format=webp&tmsIds=w&token=用户的token
			const zhognkexingtu = L.tileLayer('https://tiles{s}.geovisearth.com/base/v1/img/{z}/{x}/{y}?format=webp&tmsIds=w&token=eb2882c682c734c3cf8b617cbb8ec4b756e9d9a8d5bd1d2a80ea3b08b96f478c', {
				subdomains: [ 1, 2, 3],
				transparent: true,
				zIndex: 3,
			})
			///中科星图 标注
			const zhognkexingtubiaozhu = L.tileLayer('https://tiles{s}.geovisearth.com/base/v1/cia/{z}/{x}/{y}?format=png&tmsIds=w&token=eb2882c682c734c3cf8b617cbb8ec4b756e9d9a8d5bd1d2a80ea3b08b96f478c', {
				subdomains: [ 1, 2, 3],
				transparent: true,
				zIndex: 3,
			})
		 
		   
			//天地图影像图组
			const tiandiMapimg = L.layerGroup([image, cia, ]);
			 ////天地图矢量图组
			const tiandiMapvec = L.layerGroup([vec, cva, ]);
			 ////天地图地形图组
			const tiandiMapter = L.layerGroup([ter, cta, ]);
			////中科星图
			const zhognkexingtuMapter = L.layerGroup([zhognkexingtu, zhognkexingtubiaozhu, ]);
			
	
	
			//谷歌地图
			const satelliteMap = L.tileLayer('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
				subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
			});
	 
			//地图对象
			this.map = L.map('map', {
				crs: L.CRS.EPSG3857,
				center: [28.544177, 103.785489],
				maxZoom: 18,
				zoom: 10 ,
				minZoom: 3,
				attributionControl: false,
				layers: [tiandiMapimg],
				zoomControl: false
			});
			const baseLayers = {
				"天地图影像": tiandiMapimg,
				"天地图矢量": tiandiMapvec,
				"天地图地形": tiandiMapter,
				"谷歌影像": satelliteMap,
				"中科星图":zhognkexingtuMapter,			
			}
			var layerControl = L.control.layers(baseLayers, null);
			layerControl.addTo(this.map);
	
	
		// var marker = L.marker([28.544177,103.785489]).addTo(map);
	
		// var polygon = L.polygon([
		// [28.2,103.764],
		// [28.54,103.786],
		// [28.59,103.786]
		// ]).addTo(map);
	</script>
	

<!-- 标注 -->
<script>
	//var center = [local_lng,local_lat];
    function biaozhu(lng,lat){
		var center = [lat,lng];
		var marker = L.marker(center).addTo(map);
		map.setView(center,8);
		var circle = L.circle(center, {
		color: 'red',
		fillColor: '#f03',
		fillOpacity: 0.00,
		radius: 100000 //(米)
		}).addTo(map);
		var circle = L.circle(center, {
		color: 'yellow',
		fillColor: '#f03',
		fillOpacity: 0.00,
		radius: 200000 //(米)
		}).addTo(map);
		var circle = L.circle(center, {
		color: 'blue',
		fillColor: '#f03',
		fillOpacity: 0.00,
		radius: 400000 //(米)
		}).addTo(map);
	}
	//biaozhu(103.785489,28.544177);
</script>
<!-- 定位 -->
<script>
    //点击按钮获取地理位置信息
      //getCurrentPosition与定时器setInterval类似多次请求，因为位置需要不间断的获取
      //直接navigator.geolocation表示单次获取位置
    function get_myposition(){  
		navigator.geolocation.getCurrentPosition(function (position) {
			document.getElementById("msg").innerHTML = "支持";
			var local_lng = position.coords.longitude;
			var local_lat =position.coords.latitude;
			biaozhu(local_lng,local_lat);
			str="——  "+position.coords.longitude+","+position.coords.latitude+","+position.coords.accuracy+"  ——";
			document.getElementById("sys_lng_lat").innerHTML = str;
			var position_msg = "其他参数：<br>";
			position_msg += "准确度：	" + position.coords.accuracy + "米<br>";
			position_msg += "海拔：	" + position.coords.altitude + "米<br>";
			position_msg += "海拔准确度：	" + position.coords.altitudeAcuracy + "米<br>";
			position_msg += "行进方向：	" + position.coords.heading + "<br>";
			position_msg += "地面速度：	" + position.coords.speed + "米每秒<br>";
			position_msg += "请求的时间：	" + new Date(position.timestamp) + "<br>";
			document.getElementById("content").innerHTML = position_msg;
			document.getElementById("error_info").innerHTML = "获取成功";
      }, function (err) {
			document.getElementById("msg").innerHTML = "不支持";
			// alert("code：返回获取位置的状态："+err.code);
			var error_msg = "code:"+err.code;
			switch (err.code) { 
				case 0:error_msg += "不包括其他错误编号中的未知错误"; 
				break; 
				case 1:error_msg += "用户拒绝浏览器获取位置信息"; 
				break; 
				case 2:error_msg += "尝试获取用户信息，但失败了"; 
				break; 
				case 3:error_msg += "设置了timeout值，获取位置超时了"; 
				break; 
			}
		// var error_shuoming = "<p>返回获取位置的状态："
		// 	+"<p>0  :  不包括其他错误编号中的错误</p>"
		// 	+"<p>1  :  用户拒绝浏览器获取位置信息</p>"
		// 	+"<p>2  :  尝试获取用户信息，但失败了</p>"
		// 	+"<p>3  :   设置了timeout值，获取位置超时了</p>"

		document.getElementById("error_info").innerHTML = error_msg;
		// document.getElementById("shuoming").innerHTML = error_shuoming;
      }, {
          enableHighAcuracy: false, //位置是否精确获取
          timeout: 5000,            //获取位置允许的最长时间
          maximumAge: 1000          //多久更新获取一次位置
        })

	}
	setInterval(get_myposition, 10000);
  </script>

  <!-- 复制功能 -->
  <script>
	function copyText() {
	  var text = document.querySelector("#sys_lng_lat").textContent;
	  //var text = "要复制的文本";
	  navigator.clipboard.writeText(text).then(function() {
		var retext = "经纬度："+text+"已复制到剪贴板";
		alert(retext);
	  }, function(err) {
		alert("无法复制文本:\n请使用系统自带浏览器打开本链接！^_^", err);
	  });
	}
</script>
</body>
</html>